<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
  <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
</head>

<body class="container">
  <div class="container mt-3">
    <h2>使用.form-select 类渲染下拉菜单</h2>
    <form action="">
      <label for="sel1" class="form-label">单选下拉菜单：</label>
      <select class="form-select" id="sel1" name="sellist1">
        <option>香蕉</option>
        <option>苹果</option>
        <option>西瓜</option>
        <option>橘子</option>
      </select>
      <br> <br> <br> <br>
      <label for="sel2" class="form-label">多选下拉菜单：</label>
      <select multiple class="form-select" id="sel2" name="sellist2">
        <option>香蕉</option>
        <option>苹果</option>
        <option>西瓜</option>
        <option>橘子</option>
      </select>
      <button type="submit" class="btn btn-primary mt-3">提交</button>
    </form>
</body>

</html>